<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博物馆访问数据可视化</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 全局样式 */
        body {
            background: linear-gradient(120deg, #f6f8fc, #e8ebf0);
            font-family: 'Arial', sans-serif;
        }
        .navbar {
            background: #4e73df;
            color: white;
        }
        .navbar-brand {
            color: white;
            font-weight: bold;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        .card-header {
            background: #4e73df;
            color: white;
            font-weight: bold;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        h1 {
            margin-bottom: 40px;
            font-size: 2.5rem;
            color: #4e73df;
            text-align: center;
            font-weight: bold;
        }
        footer {
            text-align: center;
            padding: 20px;
            background-color: #4e73df;
            color: white;
            margin-top: 50px;
        }
        .row .col-md-6 {
            margin-bottom: 30px;
        }
        canvas {
            transition: transform 0.2s ease-in-out;
        }
        canvas:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">博物馆数据可视化</a>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mt-5">
        <h1>博物馆访问数据分析</h1>

        <!-- Grid Layout for Charts -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">地区博物馆数量分布</div>
                    <div class="card-body">
                        <canvas id="regionChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">用户访问时间分布（按小时）</div>
                    <div class="card-body">
                        <canvas id="hourChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">最受欢迎的博物馆</div>
                    <div class="card-body">
                        <canvas id="museumChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">各地区访问量占比</div>
                    <div class="card-body">
                        <canvas id="regionDonutChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">用户访问量按月份分布</div>
                    <div class="card-body">
                        <canvas id="monthlyChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        博物馆数据可视化平台 &copy; 2024
    </footer>

    <script>
        // 请求数据并渲染图表
        $.getJSON('/api/data_summary', function(data) {
            // 地区分布柱状图
            new Chart(document.getElementById('regionChart'), {
                type: 'bar',
                data: {
                    labels: Object.keys(data.region_distribution),
                    datasets: [{
                        label: '博物馆数量',
                        data: Object.values(data.region_distribution),
                        backgroundColor: '#4e73df',
                        borderColor: '#4e73df',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            enabled: true
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 用户访问时间分布（按小时）
            new Chart(document.getElementById('hourChart'), {
                type: 'line',
                data: {
                    labels: Array.from({ length: 24 }, (_, i) => i + '时'),
                    datasets: [{
                        label: '访问量',
                        data: Object.values(data.hour_distribution),
                        borderColor: '#1cc88a',
                        fill: true,
                        backgroundColor: 'rgba(28, 200, 138, 0.2)',
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                }
            });

            // 最受欢迎的博物馆
            new Chart(document.getElementById('museumChart'), {
                type: 'pie',
                data: {
                    labels: Object.keys(data.top_museums),
                    datasets: [{
                        data: Object.values(data.top_museums),
                        backgroundColor: ['#ff6f61', '#ffa07a', '#f0e68c', '#98fb98', '#87ceeb', '#da70d6', '#ffb6c1', '#f4a261', '#8b4513', '#9acd32'],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });

            // 各地区访问量占比
            new Chart(document.getElementById('regionDonutChart'), {
                type: 'doughnut',
                data: {
                    labels: Object.keys(data.region_distribution),
                    datasets: [{
                        data: Object.values(data.region_distribution),
                        backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b', '#858796', '#5a5c69', '#fd7e14'],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                }
            });

            // 用户访问量按月份分布
            const monthlyData = { '1月': 500, '2月': 600, '3月': 700, '4月': 800, '5月': 900, '6月': 950, '7月': 1000, '8月': 1050, '9月': 1100, '10月': 1200, '11月': 1250, '12月': 1300 };
            new Chart(document.getElementById('monthlyChart'), {
                type: 'line',
                data: {
                    labels: Object.keys(monthlyData),
                    datasets: [{
                        label: '访问量',
                        data: Object.values(monthlyData),
                        borderColor: '#36b9cc',
                        fill: true,
                        backgroundColor: 'rgba(54, 185, 204, 0.2)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                }
            });
        });
    </script>
</body>
</html>
